<template>
	<div class="list">
		<div class="list-item active1" @click="goUrl('marketing')">
			<div class="list-item-left">
				<div class="list-item-left1">营销管理</div>
				<div class="list-item-left2">日常营销工作记录、统计</div>
			</div>
			<div class="list-item-right bac1">立即前往</div>
		</div>
		<div class="list-item active2" @click="goUrl('perManage')">
			<div class="list-item-left">
				<div class="list-item-left1">用户管理</div>
				<div class="list-item-left2">对用户权限进行分层管理</div>
			</div>
			<div class="list-item-right bac2">立即前往</div>
		</div>
		<div class="list-item active3" @click="goUrl('quota')">
			<div class="list-item-left">
				<div class="list-item-left1">额度测算</div>
				<div class="list-item-left2">企业信用额度测算</div>
			</div>
			<div class="list-item-right bac3">立即前往</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'list',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			goUrl(url) {
				this.$router.push({
					name: url,
				});
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.list {
		overflow: hidden;
	}
	.active1 {
		background-image: url('~img/marketingExtension/list_1.png');
	}
	.active2 {
		background-image: url('~img/marketingExtension/list_2.png');
	}
	.active3 {
		background-image: url('~img/marketingExtension/list_3.png');
	}
	.list-item {
		margin: 2px 4px;
		height: 105px;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 22.5px;
		// border: 1px solid red;
		.list-item-left1 {
			font-size: 16px;
			font-family: Alibaba PuHuiTi;
			font-weight: bold;
			color: #000000;
		}
		.list-item-left2 {
			margin-top: 6px;
			font-size: 12px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #4b4b4b;
		}
		.list-item-right {
			height: 27px;
			border-radius: 14px;
			font-size: 13px;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			align-items: center;
			padding: 0 15px;
			&.bac1 {
				background: #93acd8;
			}
			&.bac2 {
				background: #8bc9af;
			}
			&.bac3 {
				background: #bba1db;
			}
		}
	}
</style>
